import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Link, useHistory } from 'react-router-dom'
import { Layout, Menu, Breadcrumb, Row, Col, Button, Tabs, Space, message, PageHeader, Typography, Modal } from 'antd';
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
import { Select, Form, Input, Checkbox } from 'antd'
import { checkAdmin } from '../../../../utils/loginUtils/loginMethod'
import api from '../../../../utils/requestUtils/apiConfig'
import axios from 'axios'
export default ({
    defaultValue,
    visible,
    setVisible,
    option,
    setDefaultValue,
    setRepeat,
    repeat

}) => {

    const [id, setId] = useState(defaultValue.id)
    const [type, setType] = useState(defaultValue.type)
    const [question, setQuestion] = useState(defaultValue.question)
    const [optionOne, setOptionOne] = useState(defaultValue.optionOne)
    const [optionTwo, setOptionTwo] = useState(defaultValue.optionTwo)
    const [optionThree, setOptionThree] = useState(defaultValue.optionThree)
    const [optionFour, setOptionFour] = useState(defaultValue.optionFour)
    const [answer, setAnswer] = useState(defaultValue.answer)
    const [picture, setPicture] = useState(defaultValue.picture)

    console.log(defaultValue, "defaultva")
    const { Title, Text } = Typography;
    const { TextArea } = Input;
    const { TabPane } = Tabs;
    const history = useHistory()
   
    //提交信息
    const handleOk = () => {
        const params = {
            id,
            type,
            question,
            optionOne,
            optionThree,
            optionFour,
            answer,
            picture
        }
        console.log(params)
        if (option == 'save') {
            axios({
                url: api.saveSubjectOneQuestion,
                method: 'post',
                headers: '',
                params: '',
                data: params
            }).then((res) => {
                const mes = res.data.message
                if (mes == 'success') {
                    message.success('保存成功')
                }
                else {
                    message.error('保存失败')
                }
                setDefaultValue({})
                setRepeat(repeat + 1)
                setVisible(false)
            })
        }
        else if (option == 'update') {
            axios({
                url: api.updateSubjectOneQuestion,
                method: 'post',
                headers: '',
                params: '',
                data: params
            }).then((res) => {
                const mes = res.data.message
                if (mes == 'success') {
                    message.success('修改成功')
                }
                else {
                    message.error('修改失败')
                }
                setDefaultValue({})
                setRepeat(repeat + 1)
                setVisible(false)
            })
        }
    }

    // const layout = {
    //     labelCol: {
    //         span: 8,
    //     },
    //     wrapperCol: {
    //         span: 16,
    //     },
    // };
    // const tailLayout = {
    //     wrapperCol: {
    //         offset: 8,
    //         span: 16,
    //     },
    // };
    const selectOption = [
        { label: "道路交通安全法律法规", value: 1 },
        { label: "交通信号", value: 2 },
        { label: "安全文明驾驶基础知识", value: 3 },
        { label: "机动车驾驶操作基础知识", value: 4 },
        { label: "货车专属题目", value: 5 },
        { label: "客车专属题目", value: 6 },
        { label: "交通事故救护常识", value: 7 },
    ]
    const answerOptions = [
        { label: "A", value: "1" },
        { label: "B", value: "2" },
        { label: "C", value: "3" },
        { label: "D", value: "4" },
    ]




    useEffect(() => {
        setId(defaultValue.id)
        setType(defaultValue.type)
        setQuestion(defaultValue.question)
        setOptionOne(defaultValue.optionOne)
        setOptionTwo(defaultValue.optionTwo)
        setOptionThree(defaultValue.optionThree)
        setOptionFour(defaultValue.optionFour)
        setAnswer(defaultValue.answer)
        setPicture(defaultValue.picture)
    }, [visible])


    return (
        <>




            <Modal
                title={option == 'save' ? "添加试题" : "修改试题"}
                visible={visible}
                onCancel={() => { setDefaultValue({}); setVisible(false) }}
                onOk={() => { handleOk() }}
                okText='提交'
            >
                <Space
                    direction='vertical'
                >
                    <Space>
                        <span>试题类型：</span>
                        <Select
                            style={{ width: 300 }}
                            value={type}
                            options={selectOption}
                            onChange={(value) => {
                                setType(value)
                            }}

                        />
                    </Space>

                    <Space>
                        <span>题目：</span>
                        <Input.TextArea
                            style={{ width: 300 }}
                            placeholder="请输入试题"
                            value={question}
                            onChange={(e) => { setQuestion(e.target.value) }}

                        />
                    </Space>

                    <Space>
                        <span>选项A：</span>
                        <Input
                            style={{ width: 300 }}
                            value={optionOne}
                            onChange={(e) => { setOptionOne(e.target.value) }}
                        />
                    </Space>
                    

                    <Space
                    >
                        <span>选项B：</span>
                        <Input
                            style={{ width: 300 }}
                            value={optionTwo}
                            onChange={(e) => { setOptionTwo(e.target.value) }}
                        />
                    </Space>
                    <Space
                    >
                        <span>选项C：</span>
                        <Input
                            style={{ width: 300 }}
                            value={optionThree}
                            onChange={(e) => { setOptionThree(e.target.value) }}
                        />
                    </Space>
                    <Space
                    >
                        <span>选项D：</span>
                        <Input
                            style={{ width: 300 }}
                            value={optionFour}
                            onChange={(e) => { setOptionFour(e.target.value) }}
                        />
                    </Space>

                    <Space
                    >
                        <span>答案：</span>
                        <Select
                            style={{ width: 300 }}
                            value={answer}
                            options={answerOptions}
                            onChange={(value) => {
                                setAnswer(value)
                            }}
                        />

                    </Space>

                    <Space
                    >
                        <span>图片地址:</span>
                        <Input
                            style={{ width: 300 }}
                            value={defaultValue.picture}
                            onChange={(e) => { setPicture(e.target.value) }}
                        />
                    </Space>

                </Space>

            </Modal>
        </>
    )
}


